<template>
    <view class="container-c">
        <image
            @click="upload"
            src="@/static/common/upload.png"
            class="upload"
        />
        <text class="describe" v-if="fileList.length === 0 && content">
            {{ content }}
        </text>
        <view class="img-box" v-for="(item, index) in fileList" :key="index">
            <image
                @click="preview(index)"
                :src="item.tempFilePath"
                mode="aspectFill"
                class="upload"
                v-if="item.fileType === 'image'"
            />
            <video
                @click="preview(index)"
                :src="item.tempFilePath"
                mode="aspectFill"
                class="upload"
                v-if="item.fileType === 'video'"
            />
            <view class="del" @click="del(index)">×</view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref, watch, defineEmits } from 'vue'
import { toast } from '@/utils/util'
import { FileDto } from '@/utils/dto'
const emits = defineEmits(['change'])
const props = defineProps(['list', 'max', 'isVideo', 'content'])

watch(
    () => props.list,
    (newValue: FileDto[]) => {
        fileList.value = newValue
    }
)
const fileList = ref([] as FileDto[])

const upload = async () => {
    let result
    if (!props.isVideo) {
        result = await uni.chooseImage({
            sizeType: 'compressed'
        })
    } else {
        result = await uni.chooseMedia({})
    }
    const data = (result as unknown) as {
        tempFiles: FileDto[]
    }
    if (props.max) {
        const len = fileList.value.length + data.tempFiles.length - props.max
        if (len > 0) {
            toast('超出数量限制')
            data.tempFiles.splice(
                data.tempFiles.length - len,
                data.tempFiles.length
            )
        }
    }
    data.tempFiles[0].fileType = data.tempFiles[0].fileType || 'image'
    data.tempFiles[0].tempFilePath =
        data.tempFiles[0].tempFilePath || data.tempFiles[0].path
    fileList.value.push(...data.tempFiles)
    console.log(fileList.value, 'fileList')
    emits('change', fileList.value)
}

const preview = (index: number) => {
    uni.previewImage({
        urls: fileList.value.map(item => item.tempFilePath),
        loop: true,
        current: index
    })
}

const del = (index: number) => {
    fileList.value.splice(index, 1)
}
</script>
<style lang="scss">
.container-c {
    margin: 30rpx 0 20rpx;
}
.upload {
    width: 150rpx;
    height: 150rpx;
    margin-top: 10rpx;
    margin-right: 10rpx;
    display: inline-block;
}
.img-box {
    display: inline-block;
    position: relative;
}
.del {
    background-color: #cccccc;
    width: 20rpx;
    height: 20rpx;
    line-height: 20rpx;
    border-radius: 20rpx;
    color: white;
    @include flex-center;
    position: absolute;
    right: 15rpx;
    top: 15rpx;
}
.describe {
    font-size: 24rpx;
    color: #9497b1;
    top: -6rpx;
    position: relative;
}
</style>
